<!-- 医学系统进入表单提交组件 -->
<template>
  <div class="user-detail">
    <span class="user"> 用户信息 </span>

    <div class="detail-box">
      <span v-for="(item, key, index) in state.userDetail" :key="key" class="row-item">
        <span class="label">{{ key }} ：</span>
        <span class="value">{{ item }}</span>
      </span>
    </div>
  </div>

  <!-- 表单上传 -->
  <div class="form" v-if="!state.uploadTrue">
    <el-form :model="state.form" label-width="auto">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="病理文件" class="image-upload">
            <div class="demo-image">
              <el-image style="width: 100%; height: 100%" :src="state.form.imgUrl" fit="fill" v-if="state.form.imgUrl" />
            </div>
            <el-upload ref="upload" class="upload-demo" action="#" :on-change="handleChangeImage" :show-file-list="false" :auto-upload="false">
              <template #trigger>
                <el-button type="primary">选择文件</el-button>
              </template>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="影像文件" class="image-upload">
            <div class="demo-image">
              <!-- <el-image style="width: 100%; height: 100%" :src="state.constant.fileUrl" fit="contain" /> -->
              <video :src="state.form.fileUrl" autoplay loop style="width: 100%; height: 100%"></video>
            </div>
            <el-upload ref="upload" class="upload-demo" action="#" :on-change="handleChangeFile" :auto-upload="false" :show-file-list="false">
              <template #trigger>
                <el-button type="primary">选择文件</el-button>
              </template>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="临床指标">
            <el-input v-model="state.form.name1" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="TBIL">
            <el-input v-model="state.form.name2" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="患者年龄">
            <el-input v-model="state.form.name3" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="AST">
            <el-input v-model="state.form.name4" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="患者体重">
            <el-input v-model="state.form.name5" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="ALT">
            <el-input v-model="state.form.name6" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="患者身高">
            <el-input v-model="state.form.name7" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="肿瘤最大径(cm)">
            <el-input v-model="state.form.name8" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入院前慢性病">
            <el-input v-model="state.form.name9" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="卫星病灶数量">
            <el-input v-model="state.form.name10" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="肿瘤个数">
            <el-input v-model="state.form.name11" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="血管侵犯程度(%)">
            <el-input v-model="state.form.name12" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <!-- 提交上传后显示 -->
  <div class="upload-ed" v-else>
    <div class="tag">
      <span class="tag-item" :class="{ acticveTag: item == state.acticveTag }" v-for="item in tagBtn" @click="state.acticveTag = item">{{ item }}</span>
    </div>
    <div class="video-detail" v-if="state.acticveTag == '影像'">
      <video :src="state.uploadedVideoUrl" autoplay loop style="width: 100%; height: 100%"></video>
    </div>
    <div class="video-detail" v-if="state.acticveTag == '病理'">
      <!-- <video :src="state.uploadedVideoUrl" autoplay loop style="width: 100%; height: 100%"></video> -->
      <el-image :src="state.uploadedImageUrl" alt="" style="width: 100%; height: 100%" />
    </div>
  </div>

  <div class="button-list">
    <el-button type="success" @click="handleSubmit" v-if="!state.uploadTrue && !state.resetAITest">提交</el-button>
    <el-button type="success" @click="handleAi" v-if="state.uploadTrue && !state.resetAITest && state.specil">AI检测</el-button>
    <el-button type="success" @click="handleResetAi" v-if="state.resetAITest">再次AI检测</el-button>
    <el-button type="success" @click="handleBaogao" v-if="state.resetAITest && state.isResultAi">报告下载</el-button>
  </div>
</template>

<script setup>
import { inject } from "vue"
import { ElLoading } from "element-plus"
import { cardList, tagBtn } from "../variable"

const emits = defineEmits(["initChart"])
const state = inject("mainState", {})

/**
 * 处理图片更改事件
 *
 * 当需要更改表单中的图片时，调用此方法。
 * 它将表单中的图片URL设置为常量中的图片URL。
 */
const handleChangeImage = () => {
  state.form.imgUrl = state.constant.imgUrl
}

/**
 * 处理文件变更的方法
 */
const handleChangeFile = () => {
  state.form.fileUrl = state.constant.fileUrl
}

/**
 * 处理表单提交的函数
 */
const handleSubmit = () => {
  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)",
  })
  setTimeout(() => {
    loading.close()
    state.uploadTrue = true
    state.uploadedVideoUrl = state.constant.videoSrc
    state.uploadedImageUrl = state.constant.imgUrl
  }, 300)
}

/**
 * 处理AI相关逻辑
 *
 * 使用Element UI的Loading服务，显示一个加载中的提示框，等待300毫秒后关闭提示框，
 * 并更新state中的table1和table2状态为constant中的table1和table2的值
 */
const handleAi = () => {
  const loading = ElLoading.service({
    lock: true,
    text: "正在检测中...",
    background: "rgba(0, 0, 0, 0.7)",
  })
  setTimeout(() => {
    loading.close()
    state.specil = false
    state.uploadedImageUrl = state.constant.imgUrl_ed

    state.table1 = state.constant.table1
    state.table2 = state.constant.table2


    state.right1ImgSrc = state.constant.right1ImgSrc
    state.right2ImgSrc = state.constant.right2ImgSrc

    state.isAi = true

    setTimeout(() => {
      emits("initChart")
    }, 100)
    console.log("state: ", state)
  }, 300)
}


/**
 * 重置AI测试状态
 * 将state中的resetAITest属性设置为true，用于重置AI测试的状态
 */
const handleResetAi = () => {
  const loading = ElLoading.service({
    lock: true,
    text: "正在检测中...",
    background: "rgba(0, 0, 0, 0.7)",
  })
  setTimeout(() => {
    loading.close()
    state.uploadedImageUrl = state.constant.imgUrl_ed

    state.table1 = state.constant.table1
    state.table2 = state.constant.table2

    state.uploadedVideoUrl = state.constant.videoSrc_ed

    state.right1ImgSrc = state.constant.right1ImgSrc
    state.right2ImgSrc = state.constant.right2ImgSrc

    state.isResultAi = true

    setTimeout(() => {
      emits("resetInitChart")
    }, 100)
    console.log("state: ", state)
  }, 2300)
}

const handleBaogao = () => {
  window.open(state.constant.reportUrl)
};

</script>

<style scoped lang="scss">
header {
  padding: 0 20px;

  .title {
    font-size: 30px;
    color: #f0f2f5;
    font-family: AlibabaPuHuiTi-2-85-Bold;
  }
}

.user-detail {
  height: 100px;
  margin: 50px 0 30px;
  padding: 0 20px;

  // border: 1px dashed #ccc;
  // box-shadow: -7px -7px 6px rgba(0, 0, 0, 0.12) ,7px 7px 6px rgba(0, 0, 0, 0.12);
  // border-radius: var(--el-card-border-radius);
  // border: 1px solid var(--el-card-border-color);
  // background-color: var(--el-card-bg-color);

  .user {
    height: 30px;
    line-height: 30px;
    color: #fff;
    background-color: #3d05be;

    font-weight: bolder;
    font-size: 20px;
    background: linear-gradient(to bottom right, #11cbe4, #ffffff 70%, #15bc98);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: AlibabaPuHuiTi-2-85-Bold;
  }

  .detail-box {
    display: flex;
    flex-wrap: wrap;
    color: #fff;
    height: 60px;
    justify-content: space-around;
    align-items: center;

    .row-item {
      width: 33%;
      display: flex;
      flex-direction: row;
    }
  }
}

.form {
  padding: 0 20px;

  .image-upload {
    .el-form-item__content {
      flex-direction: column;

      .demo-image {
        width: 200px;
        height: 200px;
        margin-bottom: 10px;
        border: 1px dashed #ccc;
        background-color: #00000033;

        video {
          object-fit: fill;
        }
      }
    }
  }
}

.upload-ed {
  padding: 0 20px 200px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;

  .tag {
    display: flex;
    flex-direction: row;

    .tag-item {
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
      color: #fff;

      &.acticveTag {
        background: linear-gradient(to bottom right, #607de7da, #3d05be);
        /* 边框宽度 */
        border-width: 2px;
        /* 边框样式 */
        border-style: solid;
        border-color: transparent;
        /* 渐变边框 不能和border-radius同时使用 */
        // border-image: linear-gradient(to right, #3d05be, #607de7da) 1;
        border-radius: 10px;
      }
    }
  }

  .video-detail {
    padding: 20px 0;
    flex: 1;
    overflow: hidden;

    video {
      object-fit: fill;
    }
  }
}

.button-list {
  padding: 0 20px;
  position: absolute;
  bottom: 100px;
  right: 30px;
}

.video-class {
  width: 100%;
  height: 100%;
}
</style>
